<!--
获取/修改表单元素属性
    表单（主要是指 input 标签）的以下属性都可以通过 DOM 修改
        value：input 的值
        disabled：禁用
        checked：复选框会使用 取值 true 或者 false 
        selected：下拉框会使用
        type：input的类型（文本密码，按钮，文件等）
-->


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 案例1 切换按钮的文本-->
    <input type="button" class="btn" value="播放">
    <br>

    <!-- 案例2 点击计数-->
    <input type="text" class="input" value="0">
    <input type="button" class="add" value="+1">
    <input type="button" class="min" value="-1">
    <br>

    <!-- 案例3 全选/取消全选按钮-->
    <input type="checkbox" class="all">选中全部<br>
    <input type="checkbox" class="select">选项1<br>
    <input type="checkbox" class="select">选项2<br>
    <input type="checkbox" class="select">选项3<br>
    <input type="checkbox" class="select">选项4<br>


</body>

<script>
    // 案例1 切换 文本
    let button=document.querySelector(".btn");
    button.onclick=function(){
        if(button.value=="播放"){
            button.value="暂停";
        }
        else{
            button.value='播放';
        }
    }

    // 案例2 点击计数
    let text=document.querySelector(".input");
    let bt1=document.querySelector(".add");
    let bt2=document.querySelector(".min");

    bt1.onclick=function(){
        let value=parseInt(text.value)+1;   // 将字符类型转换为整形
        text.value=value;
    }

    bt2.onclick=function(){
        let value=parseInt(text.value)-1;   // 将字符类型转换为整形
        text.value=value;
    }

    // 案例3 全选/取消全选按钮
    let all=document.querySelector(".all");
    let opction=document.querySelectorAll(".select");

    all.onclick=function(){
        for(i=0;i<opction.length;i++){
            opction[i].checked=all.checked;  // 将子选项的状态和父选项一样
        }
        
    }

    // 对子选项进行事件绑定
    // 实现子选项只要一个未被选中，则全选按钮不被选中
    for(i=0;i<opction.length;i++)
    {
        opction[i].onclick=function(){
            all.checked=IsSelectAll(opction);// 判断是否选中了全部
        }
    }

    // 子选项是否全部选择
    function IsSelectAll(opction){
        for(i=0;i<opction.length;i++){
            if(opction[i].checked==false){
                return false;
            }
        }
        return true;
    }


</script>

</html>